<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="title">选择单位</div>
        <div>
          <el-tree
            :data="data"
            :props="{
              children: 'childList',
              label: 'name',
            }"
            @node-click="handleNodeClick"></el-tree>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="title">选择人员</div>
        <el-row :gutter="24">
          <el-checkbox-group v-model="staffCheckIds" @change="nameCardChecked">
            <el-col :span="12" v-for="(item, index) in bookData" :key="index" :style="{ marginBottom: '10px' }">
              <div class="name-card">
                <div class="selection">
                  <el-checkbox :label="item.userId">
                    <br />
                  </el-checkbox>
                </div>
                <el-card class="address-card">
                  <div class="avatar">
                    <img :src="defaultAvatar" class="avatar-img" />
                  </div>
                  <div class="info">
                    <div class="name">
                      {{ item.userName }}
                    </div>
                    <div class="contact">
                      <span class="mobile">{{ item.phoneNo }}</span>
                    </div>
                  </div>
                </el-card>
              </div>
            </el-col>
          </el-checkbox-group>
        </el-row>
        <!-- <el-row :style="{ textAlign: 'center' }">
          <pagination v-show="total > 0" :total="total" :page.sync="userQueryForm.pageNum" :limit.sync="userQueryForm.pageSize" :pageSizes="[userQueryForm.pageSize]" @pagination="getUsers" />
        </el-row> -->
      </el-col>
    </el-row>
  </div>
</template>
<script>
import defaultAvatar from "@/assets/images/default_avatar.jpeg";
import { treeselect, getDeptList } from "@/api/system/dept";
import { listUser, getUserByDeptId } from "@/api/system/user";
export default {
  name: "StaffChoose",
  props: {
    muilt: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      data: [],
      bookData: [],
      // 总条数
      total: 0,
      userQueryForm: {
        pageNum: 1,
        pageSize: 10,
      },
      defaultAvatar: defaultAvatar,
      staffCheckIds: [],
      selectedUsers: [],
      selectedIds: [],
      selectedDept: null,
    };
  },
  mounted() {
    this.getDept();
  },
  computed: {},
  methods: {
    getDept() {
      getDeptList().then(res => {
        this.data = res.data;
      });
    },
    handleNodeClick(data) {
      this.selectedDept = data;
      this.userQueryForm.deptId = data.id;
      this.getUsers();
    },
    getUsers() {
      const that = this;
      getUserByDeptId(this.userQueryForm.deptId).then(res => {
        res.data.forEach(user => {
          user.userName = user.name;
        });
        that.bookData = res.data;
      });
    },
    nameCardChecked(userIds) {
      if (this.muilt) {
        this.muiltCheck(userIds);
      } else {
        this.singleCheck(userIds);
      }
    },
    singleCheck(userIds) {
      this.staffCheckIds = [userIds[userIds.length - 1]];
      this.bookData.forEach(user => {
        if (user.userId == userIds[userIds.length - 1]) {
          this.selectedUsers = [user];
        }
      });
      this.selectedIds = this.staffCheckIds;
      this.$emit("onStaffChosen", this.userQueryForm.deptId, this.selectedIds, this.selectedUsers, this.selectedDept);
    },
    muiltCheck(userIds) {
      // 先判断是增加还是减少
      if (userIds.length < this.selectedIds.length) {
        // 减少
        // 找出减少的userId
        var decId = 0;
        this.selectedIds.forEach(id => {
          if (!userIds.includes(id)) {
            decId = id; //每次只选中一个用户，所以直接赋值即可
          }
        });
        let userIndex = this.selectedUsers.findIndex(val => val.userId == decId); // 找到减少的userid在bookdata中的索引
        this.selectedUsers.splice(userIndex, 1);
      } else {
        // 增加
        // 找出增加的userId
        var addId = 0;
        userIds.forEach(id => {
          if (!this.selectedIds.includes(id)) {
            addId = id; //每次只选中一个用户，所以直接赋值即可
          }
        });
        this.bookData.forEach(user => {
          if (user.userId == addId) {
            this.selectedUsers.push(user); // 推送到当前选中用户数组里
          }
        });
      }

      this.selectedIds = userIds;
      this.$emit("onStaffChosen", this.userQueryForm.deptId, userIds, this.selectedUsers, this.selectedDept);
    },
    resetCheck() {
      this.staffCheckIds = [];
      this.selectedUsers = [];
      this.selectedIds = [];
      this.selectedDept = null;
      this.bookData = [];
    },
  },
};
</script>
<style scoped>
.title {
  line-height: 30px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #409eff;
  margin: unset !important;
}

.name-card {
  display: flex;
  align-items: center;
}

.name-card:hover {
  cursor: pointer;
}

.el-card {
  flex: 1;
  margin-left: 15px;
}

.card-form {
  flex: 1;
  text-align: right;
  display: flex;
  align-items: center;
}

.el-card /deep/ .el-card__header > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-card /deep/ .el-card__header > div > span {
  flex: 1;
}

.card-form .el-radio:first-of-type {
  margin-left: 30px;
}

.address-card /deep/ .el-card__body {
  display: flex;
  flex-flow: row;
  padding: 10px;
}

.avatar {
  width: 40px;
  height: 40px;
}

.avatar img {
  width: inherit;
  height: inherit;
}

.info {
  flex: 1;
  display: flex;
  flex-flow: column;
  margin-left: 10px;
}

.name {
  flex: 1;
  font-size: 18px;
  border-bottom: 1px solid white;
  padding-bottom: 5px;
}

.name span {
  font-size: 13px;
  margin-left: 10px;
  color: grey;
}

.contact {
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  color: white;
}
</style>
